<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的大学牲活</title>
<style>
ul {
  list-style-type: none;
  margin: 2px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  display:inline-block;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: skyblue;
}
</style>
</head>
<style>
    a:visited{
            color:green;
        }
    a:hover{
            color:blue;
        }
        div p{
            display:none;
        }
        div:hover p{
            display:block;
        }
        table-back,th{
background-color:rgb(18, 50, 108);
color:bisque;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
        }
        table-back,td{
          background-color:blueviolet;
          color:deeppink;
        }
        table,td,th{
          border:5px solid black;
        }
        .table,td,th{
          border-collapse:collapse;
          width:400px;
          height:100px;
        }
        table{
          width:100%;
          border-collapse:collapse;
        }
        div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  box-shadow: 10px 10px 10px; 
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.zsh {
  padding: 15px;
  text-align: center;
}
        footer{
	clear:both;
	display:block;
	background-color:#f08622;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
</style>
<body background="sky.jpg">
<header>
    <nav>
        <ul>
            <li><a href="http://www.baidu.com"target="_blank">百度</a>
            <li><a href="https://www.bilibili.com"target="_blank">b站</a>
            <li><a href="https://china.nba.cn"target="_blank">NBA中国官网</a>
            <li><a href="https://www.4399.com"target="_blank">大学生的游戏</a>
          </ul>
    </nav>
</header>
<nav>
<main>
    <div>
        What's this?
        <p>啥也不是</p>
    </div>
    <h1>欢迎来到美丽的江财</h1>
    <table>
    <tr>
      <th>第一食堂</th>
      <th>第二食堂</th>
    </tr>
    <tr>
      <td>菜品多</td>
      <td>味道好</td>
    </tr>
    <tr>
      <td>味道一般</td>
      <td>有过小动物</td>
    </tr>
    </table>
    <div class="gallery">
      <a target="-blank"href="birthdaycake.jpg">
        <img src="birthdaycake.jpg"width="500"height="500">
      </a>
      <div class="zsh">18岁生日</div>
    </div>
    <div class="gallery">
      <a target="-blank"href="ferris wheel.jpg">
        <img src="ferris wheel.jpg"width="500"height="500">
      </a>
      <div class="zsh">重返南昌之星</div>
    </div>
    <div class="gallery">
      <a target="-blank"href="volunteer.jpg">
        <img src="volunteer.jpg"width="500"height="500">
      </a>
      <div class="zsh">劝捐爱心</div>
    </div>
    <div class="gallery">
      <a target="-blank"href="yogurt.jpg">
        <img src="yogurt.jpg"width="500"height="500">
      </a>
      <div class="zsh">奖励自己一份酸奶</div>
    </div>
    <p></p>
</main>
</nav>
<footer><a>关于江财那些美好时光</a></footer>
</body>
</html>
